<template>
    <div class="icon">
        <swiper>
            <swiper-slide v-for="(v,i) in myiconlist" :key="i" v-if="myiconlist.length>0">
                <ul v-for="(j,i) in v" :key="i">
                    <li><img :src="j.imgUrl"></li>
                    <li>{{j.desc}}</li>
                </ul>
            </swiper-slide>
        </swiper>
    </div>
</template>

<script>
    export default {
        name: 'icon',
        props: ['iconlist'],
        computed: {
            myiconlist: function() {
                var arr = [];
                for (var i = 0; i < this.iconlist.length; i++) {
                    var page = Math.floor(i / 8);
                    if (!arr[page]) {
                        arr[page] = [];
                    }
                    arr[page].push(this.iconlist[i]);
                }
                return arr;
            },
        },
    }
</script>

<style scoped>
    .swiper-container {
        height: 440px;
    }
    .swiper-slide {
        display: flex;
        flex-wrap: wrap;
    }
    .icon ul {
        width: 25%;
        text-align: center;
    }
    .icon ul li:first-child img {
        width: 126px;
        height: 127px;
        padding-top: 22px;
    }
    .icon ul li:nth-child(2) {
        padding: 20px 0;
        font-size: 28px;
    }
</style>